<template>
    <view class="my-settle-container">
        <!-- 全选 -->
        <label class="radio" @click="changeAllState">
            <radio color="#C00000" :checked="isFullCheck" />
            <text>全选</text>
        </label>

        <!-- 合计 -->
        <view class="amount-box">
            合计:
            <text class="amount">￥{{ checkedGoodsAmount }}</text>
        </view>

        <!-- 结算按钮 -->
        <view class="btn-settle" @click="settlement">结算({{ checkedCount }})</view>
    </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
    data() {
        return {
            seconds: 3, //倒计时的秒数
            timer: null //定时器的ID
        };
    },

    methods: {
        ...mapMutations('m_cart', ['updateAllGoodsState']),
        ...mapMutations('m_user', ['updataRedirectInfo']),

        // 全选按钮点击反选事件
        changeAllState() {
            this.updateAllGoodsState(!this.isFullCheck);
        },

        // 点击结算按钮事件
        settlement() {
            if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品');

            if (!this.addrStr) return uni.$showMsg('请选择地址');

            // if(!this.token) return uni.$showMsg('请登录后再支付')

            if (!this.token) return this.delayNavigate();
            
            this.payOrder()
        },
        
        async payOrder() {
            // 1.创建订单
            // 1.1组织订单信息对象
            const orderInfo = {
                // order_price: this.checkedGoodsAmount,
                // 开发期间写死价格0.01
                order_price: 0.01,
                consignee_addr: this.addrStr',
                goods: this.cart.filter(x => x.goods_state).map(x => {
                    goods_id: x.goods_id,
                    goods_number: x.goods_count,
                    goods_price: x.goods_price
                })
            }
            
            // 1.2发起请求
            const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
            if(res.status !== 200) return uni.$showMsg('创建订单失败')
            
            // 1.3得到服务器响应订单号
             const orderNumber = res.message.order_number
             
            // 2. 订单预支付
            // 2.1 发起请求获取订单的支付信息
            const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
            
            // 2.2 预付订单生成失败
            if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
            
            // 2.3 得到订单支付相关的必要参数
            const payInfo = res2.message.pay
            
            // 3.1 调用 uni.requestPayment() 发起微信支付
            const [err, succ] = await uni.requestPayment(payInfo)
            
            if(err) return uni.$showMsg('订单未支付')
            
            // 3.3 完成了支付，进一步查询支付的结果
            const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
             
            if(res3.status !== 200) return uni.$showMsg('订单未支付')
             
            uni.showToast({
                title: '支付成功',
                icon: 'success'
            })
        },

        delayNavigate() {
            this.seconds = 3;

            this.showTips(this.seconds);

            this.timer = setInterval(() => {
                this.seconds--;

                if (this.seconds <= 0) {
                    clearInterval(this.timer);

                    uni.switchTab({
                        url: '/pages/my/my',
                        success: () => {
                            this.updataRedirectInfo({
                                openType: 'switchTab',
                                from: '/pages/cart/cart'
                            });
                        }
                    });

                    return;
                }

                this.showTips(this.seconds);
            }, 1000);
        },

        // 展示倒计时
        showTips(n) {
            uni.showToast({
                icon: 'none',
                title: '请登录后在结算!' + n + '秒之后自动跳转到登录页',
                mask: true,
                duration: 1500
            });
        }
    },

    computed: {
        ...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']),
        ...mapGetters('m_user', ['addrStr']),
        ...mapState('m_user', ['token']),
        ...mapState('m_cart', ['cart']),
        isFullCheck() {
            return this.checkedCount === this.total;
        }
    }
};
</script>

<style lang="scss">
.my-settle-container {
    position: fixed;
    width: 100%;
    height: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    font-size: 14px;

    .radio {
        display: flex;
        align-items: center;
    }

    .amount {
        color: #c00000;
    }

    .btn-settle {
        height: 50px;
        background-color: #c00000;
        min-width: 130px;
        text-align: center;
        line-height: 50px;
        color: #fff;
    }
}
</style>
